<template>
<!--  其他产品销售-->
  <div id="pb-div">
        <div class="pingban-box">
             <div class="title-pingban">
               <i class="icon-xiaoshou1" style="margin-top: 4px "></i>
               <h3 style="margin: 0;">&nbsp;已有型号其他类型产品销售</h3>
               <span  style="color: #ff3526;margin-top: 2px">&nbsp;(如果不知道出库详情，请使用此页面进行销售)</span>
               <div style="margin-left: 475px;padding-bottom: 5px;display: flex">
                 <h4 style="padding-top: 5px">经办人:&nbsp;</h4>
                 <el-tag type="warning" >{{realName}}</el-tag>
               </div>

             </div>
          <div class="pingban-box-box">
            <div class="title-pingban2">
              <h4 style="margin: 3px 6px 0px 17px;">产品列表</h4>
              <div class="title-pingban2-detail" style="border-top-left-radius: 6px;width: 200px">
                <span>类别</span>
              </div>
              <div class="title-pingban2-detail" style="width: 280px">
                <span>规格</span>
              </div>
              <div class="title-pingban2-detail" style="width: 150px">
                <span>数量</span>
              </div>
              <div class="title-pingban2-detail" style="width: 180px">
                <span>单价(元)</span>
              </div>
              <div class="title-pingban2-detail" style="width: 210px">
                <span>过磅(公斤)</span>
              </div>
              <div class="title-pingban2-detail" style="width:120px;border-right:1px solid #adacac ;border-top-right-radius: 6px">
                操作方式
              </div>
            </div>
<!--            第一-->
            <el-form  :model="no1" :rules="rules" ref="formNo1" >
            <div class="sale-detail"  style="margin-top: 10px">
                 <div class="sale-detail-number" >
<!--                   <span>&nbsp;</span>-->
                   <i class="icon-shuzi1" style="padding-left: 5px"></i>
                 </div>
              <el-select class="sale-detail-leibie" v-model="no1.leibie"   style="width:180px;margin-left: 4px">
                <el-option
                  v-for="item in leibie"
                  :key="item.small_type_id"
                  :label="item.small_type_name"
                  :value="item.small_type_id">
                </el-option>
              </el-select>
              <div class="sale-detail-houdu">
                <el-form-item prop="specification">
                <el-input   clearable v-model="no1.specification"></el-input>
                </el-form-item>
              </div>
              <div class="sale-detail-quantity">
                <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no1.quantity" ></el-input></el-form-item>
              </div>
              <div class="sale-detail-price">
                <el-form-item prop="price"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-price-detail" clearable v-model="no1.price" placeholder="元"></el-input></el-form-item>
              </div>
              <div class="sale-detail-weight">
                <el-checkbox style="padding-top: 10px" v-model="no1.way"></el-checkbox>
                <el-form-item v-if="no1.way" prop="weight"><el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  class="sale-detail-weight-detail" clearable v-model="no1.weight" placeholder="KG" ></el-input></el-form-item>
              </div>
              <div class="sale-detail-play" v-if="saleOrderDetailCount===1">
                <el-button type="success" icon="icon-jiahao" circle size="mini" @click="saleOrderDetailCount++"></el-button>
                <el-button type="danger" icon="icon-cuowu" circle @click="no1ErrorMsg" size="mini"></el-button>
              </div>
            </div>
            </el-form>
<!--            第二-->
            <el-form v-if="saleOrderDetailCount>=2"   :model="no2" :rules="rules" ref="formNo2" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi2"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no2.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.small_type_id"
                    :label="item.small_type_name"
                    :value="item.small_type_id">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="specification">
                    <el-input   clearable v-model="no2.specification" ></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no2.quantity" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-price">
                  <el-form-item prop="price"><el-input class="sale-detail-price-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no2.price" placeholder="元"></el-input></el-form-item>
                </div>
                <div class="sale-detail-weight">
                  <el-checkbox style="padding-top: 10px" v-model="no2.way"></el-checkbox>

                  <el-form-item v-if="no2.way" prop="weight"><el-input class="sale-detail-weight-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no2.weight" placeholder="KG" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===2">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第三-->
            <el-form v-if="saleOrderDetailCount>=3"   :model="no3" :rules="rules" ref="formNo3" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi3"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no3.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.small_type_id"
                    :label="item.small_type_name"
                    :value="item.small_type_id">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="specification">
                    <el-input  clearable v-model="no3.specification" ></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no3.quantity" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-price">
                  <el-form-item prop="price"><el-input class="sale-detail-price-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no3.price" placeholder="元"></el-input></el-form-item>
                </div>
                <div class="sale-detail-weight">
                  <el-checkbox style="padding-top: 10px" v-model="no3.way"></el-checkbox>

                  <el-form-item v-if="no3.way" prop="weight"><el-input class="sale-detail-weight-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no3.weight" placeholder="KG" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===3">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第四-->
            <el-form v-if="saleOrderDetailCount>=4"   :model="no4" :rules="rules" ref="formNo4" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi4"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no4.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.small_type_id"
                    :label="item.small_type_name"
                    :value="item.small_type_id">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="specification">
                    <el-input  clearable v-model="no4.specification" ></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no4.quantity" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-price">
                  <el-form-item prop="price"><el-input class="sale-detail-price-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no4.price" placeholder="元"></el-input></el-form-item>
                </div>
                <div class="sale-detail-weight">
                  <el-checkbox style="padding-top: 10px" v-model="no4.way"></el-checkbox>
                  <el-form-item v-if="no4.way" prop="weight"><el-input class="sale-detail-weight-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no4.weight" placeholder="KG" ></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===4">
                  <el-button type="success" icon="icon-jiahao" @click="saleOrderDetailCount++" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
<!--            第五-->
            <el-form v-if="saleOrderDetailCount>=5"   :model="no5" :rules="rules" ref="formNo5" >
              <div class="sale-detail"  >
                <div class="sale-detail-number" >
                  <i class="icon-shuzi5"></i>
                </div>
                <el-select class="sale-detail-leibie" v-model="no5.leibie"   style="width: 180px">
                  <el-option
                    v-for="item in leibie"
                    :key="item.small_type_id"
                    :label="item.small_type_name"
                    :value="item.small_type_id">
                  </el-option>
                </el-select>
                <div class="sale-detail-houdu">
                  <el-form-item prop="specification">
                    <el-input  clearable v-model="no5.specification" ></el-input>
                  </el-form-item>
                </div>
                <div class="sale-detail-quantity">
                  <el-form-item prop="quantity"><el-input class="sale-detail-quantity-detail" onkeyup="value=value.replace(/[^\d]/g,'')" clearable v-model="no5.quantity"></el-input></el-form-item>
                </div>
                <div class="sale-detail-price">
                  <el-form-item prop="price"><el-input class="sale-detail-price-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no5.price" placeholder="元"></el-input></el-form-item>
                </div>
                <div class="sale-detail-weight">
                  <el-checkbox style="padding-top: 10px" v-model="no5.way"></el-checkbox>
                  <el-form-item v-if="no5.way" prop="weight"><el-input class="sale-detail-weight-detail" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable v-model="no5.weight"  placeholder="KG"></el-input></el-form-item>
                </div>
                <div class="sale-detail-play"  v-if="saleOrderDetailCount===5">
                  <el-button type="success" icon="icon-jiahao" @click="no5ErrorMsg" circle size="mini"></el-button>
                  <el-button type="danger" icon="icon-cuowu" @click="saleOrderDetailCount--" circle size="mini"></el-button>
                </div>
              </div>
            </el-form>
            <div style="margin-left: 17px;width: 1215px">
              <el-divider ><span  style="display: block;background-color:#f2f2f7;color: #409EFF;font-size: 16px;font-weight: 700 ">其余选项</span></el-divider>
            </div>



            <el-form :label-position="labelPosition" label-width="85px" :rules="rules" :model="otherMsg" ref="otherMsgFrom">
            <div class="otherMsg">
              <div style="flex: 400px">
                   <el-form-item label="运费:" prop="freight">
                     <el-input  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  v-model="otherMsg.freight" style="width: 135px"></el-input>
                     <span class="danwei">元</span>
                   </el-form-item>
                   <el-form-item label="合计:" prop="count">
                     <el-input v-model="otherMsg.count" placeholder="不包含运费哟" style="width: 135px;color: black" readonly ></el-input>
                     <span class="danwei">元&nbsp;</span>
                     <el-button type="warning" icon="icon-52"  @click="countMoney" circle></el-button>
                   </el-form-item>
                   <el-form-item label="购买客户:" prop="clientName" >
                     <el-button  plain style="min-width: 135px"  @click="dialogVisible = true" >{{otherMsg.clientName===null?tipClient:otherMsg.clientName}}</el-button>
                      <el-input v-model="this.otherMsg.clientName" readonly style="display: none"  ></el-input>
                   </el-form-item>
                <el-dialog
                  title="客户选择"
                  :visible.sync="dialogVisible"
                  width="70%"
                  top="6vh"
                  >
                  <ClientPop @getClientWithChildren="getClientWithChildren"/>
                </el-dialog>

               </div>
              <div style="flex: 400px">
                <el-form-item label="出库时间:" prop="orderTime">
                  <el-date-picker
                    v-model="otherMsg.orderTime"
                    default-value
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="备注:">
                  <el-input show-word-limit maxlength="100" type="textarea" v-model="otherMsg.remark" style="width: 220px"  :rows="4"></el-input>
                </el-form-item>

              </div>
              <div style="flex: 350px;margin-top: 20px"  >
                <div style="width: 100%">
                  <el-button  type="primary" @click="submitForm" :loading="loading" style="width: 300px"><span class="btn-s">确认添加</span></el-button>
                </div>
                <div style="width: 100%;margin-top: 20px">
                  <el-button type="danger" @click="resetForm" :loading="loading" style="width: 300px" ><span class="btn-s">重新填写</span></el-button>
                </div>
              </div>
            </div>
            </el-form>


          </div>

        </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";
import {STEEL_DENSITY} from "../../utils/basic-data";
import ClientPop from "../../components/pop/ClientPop";

export default {
  name: "OtherProductsSale",
  components: {ClientPop},
  data() {
    return {
      labelPosition:'right',
      leibie: [],
      no1: {
        leibie: null,
        specification: null,
        quantity: null,
        price: null,
        weight: null,
        way: false,
      },
      no2: {
        leibie: null,
        specification: null,
        quantity: null,
        price: null,
        weight: null,
        way: false,
      },
      no3: {
        leibie: null,
        specification: null,
        quantity: null,
        price: null,
        weight: null,
        way: false,
      },
      no4: {
        leibie: null,
        specification: null,
        quantity: null,
        price: null,
        weight: null,
        way: false,
      },
      no5: {
        leibie: null,
        specification: null,
        quantity: null,
        price: null,
        weight: null,
        way: false,
      },
      otherMsg:{
        freight:null,
        client:null,
        count:null,
        orderTime:null,
        remark:null,
        clientName:null,
      },
      rules: {
        specification: [
          {required: true, message: '厚度不能为空', trigger: 'change'}
        ],
        quantity: [
          {required: true, message: '张数不能为空', trigger: 'change'}
        ],
        price: [
          {required: true, message: '单价不能为空', trigger: 'change'}
        ],
        weight: [
          {required: true, message: '重量不能为空', trigger: 'change'}
        ],
        freight: [
          {required: true, message: '请填写运费', trigger: 'change'}
        ],
        orderTime:[
          { type: 'date',required: true, message: '请选择出库时间', trigger: 'change'}
        ],
        clientName: [
          {required: true, message: '请选择客户', trigger: 'change'}
        ],
        count: [
          {required: true, message: '请填写合计总额', trigger: 'change'}
        ],
      },
      saleOrderDetailList:[],
      saleOrderDetailCount:0,
      realName:'',
      tipClient:'点击选择客户',
      dialogVisible: false,
      isNewClient:false,
      loading:false,
    }
  },
  created() {
    //获取平板类型的接口
    get("/api/v1/small-type-show/reverse").then(resp=>{
      this.leibie=resp.data
      this.no1.leibie=resp.data[0].small_type_id
      this.no2.leibie=resp.data[0].small_type_id
      this.no3.leibie=resp.data[0].small_type_id
      this.no4.leibie=resp.data[0].small_type_id
      this.no5.leibie=resp.data[0].small_type_id
    })
    this.otherMsg.orderTime=new Date();
  },
  mounted() {
    get("/api/v1/token/showRealName").then(resp=>{
      this.realName=resp.data
    })
    this.saleOrderDetailCount=1
  },
  methods: {
    getClientWithChildren(clientMsg){
      if (clientMsg.isNewClient){

        this.otherMsg.clientName=clientMsg.client.clientName

      }else {

        this.otherMsg.clientName=clientMsg.client.client_name
      }
      this.isNewClient=clientMsg.isNewClient
      this.otherMsg.client=clientMsg.client
      this.dialogVisible=false
    },
    countMoney(){
      var theCount=0
      var temp=0
      // var temp2=0
      for (var i = 0; i <this.saleOrderDetailList.length ; i++) {
        let listElement = this.saleOrderDetailList[i];
        if (!listElement.way){
          if (listElement.price===''||listElement.quantity===''||listElement.price===null||listElement.quantity===null){
            temp=0
          }else {
            temp=Math.round((listElement.price*listElement.quantity)*100)/100
          }
        }else {
          if (listElement.price===''||listElement.weight===''||listElement.price===null||listElement.weight===null){
            temp=0
          }else {
            temp=Math.round((listElement.price*listElement.weight)*100)/100
          }
        }

        theCount=Math.round((theCount+temp)*100)/100
      }
      this.otherMsg.count=theCount
    },
    getDataUtil(datanum){
      if (datanum===1){
        return this.no1;
      }
      if (datanum===2){
        return this.no2;
      }
      if (datanum===3){
        return this.no3;
      }
      if (datanum===4){
        return this.no4;
      }
      if (datanum===5){
        return this.no5;
      }
    },
    no5ErrorMsg(){
      this.$message.error("已经加到底咯")
    },
    no1ErrorMsg(){
      this.$message.error('已经不能再减少咯')

    },
    submitForm() {
      this.loading=true
      this.countMoney()
      var temp=true;
      for (var i = 1; i <=this.saleOrderDetailCount ; i++) {
        this.$refs['formNo'+i].validate((valid) => {
          if (valid) {
          } else {
            temp=false
            return false;
          }
        });
      }

      this.$refs['otherMsgFrom'].validate((valid) => {
        if (valid) {
        } else {
          temp=false
          return false;
        }
      });
      if (temp){
        let otherProductsSaleOrderVo={
          saleOtherProductsOrderDetailList:this.saleOrderDetailList,
          otherMsg:this.otherMsg,
          isNewClient:this.isNewClient
        }
        post('/api/v1/sale/otherproducts',otherProductsSaleOrderVo).then(resp=>{
          if (resp.data.code===1){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.loading=false
            this.resetForm()
          }else if (resp.data.code===0) {
            this.$message.error(resp.data.msg);
            this.loading=false
          }else {
            this.$message.error("系统好像出了点问题，找开发找bug");
            this.loading=false
          }
        }).catch(resp=>{
          this.$message.error("系统好像出问题了,快去找开发")
          this.loading=false
        })
      }else {
        this.loading=false
      }
    },
    resetForm(){
      for (var i = 1; i <=this.saleOrderDetailCount ; i++) {
        this.$refs['formNo'+i].resetFields();
      }
      this.$refs['otherMsgFrom'].resetFields();
      this.otherMsg.client=null
      this.otherMsg.remark=null
    }
  },
  watch:{
    'saleOrderDetailCount':function (newVal,oldVal){
       if (newVal-oldVal===1){
         let dataUtil = this.getDataUtil(newVal);
         this.saleOrderDetailList.push(dataUtil);
       }else {
         this.saleOrderDetailList.pop();
       }
    }
  }
}
</script>

<style scoped>
.btn-s{
  font-size: 20px;
  font-weight: bold;
}
.danwei{
  font-weight: bold;
}

h4{
  margin: 0;
}
.otherMsg{
  margin-left: 17px;
  display: flex;
  /*height: 400px;*/
  width: 1250px;
  flex-wrap: wrap;
  position: relative;
}
.el-divider{
  background-color: #2c3e50;

}
.el-divider--horizontal{
  margin-top: 12px;
  margin-bottom: 12px;
}
.el-divider__text{
  background-color: #f2f2f7 ;
  /*padding-left: 4px;*/
  /*padding-right: 4px;*/
}
.sale-detail-play{
  margin-left: 27px;
}
.sale-detail-leibie{
  margin-left: 9px;
}
.xinghao{
  margin-top: 10px;
}
.sale-detail-number{
  margin-top: 10px;
  margin-left: 45px;
  margin-right: 24px;
}
.sale-detail-way{
  width: 100px;
  margin-left: 30px;
}
.sale-detail-weight{
    margin-left: 10px;
  display: flex;
  width: 200px;
  justify-content: center;
}
.sale-detail-weight-detail{
  width: 160px;
  margin-left: 10px;

}
.sale-detail-price{
  margin-left: 18px;
}
.sale-detail-price-detail{
  width: 165px;
}
.sale-detail-quantity{
      margin-left: 16px;
}
.sale-detail-quantity-detail{
  width: 135px;

}

.sale-detail-houdu{
  width: 265px;
  margin-left: 20px;
}
.sale-detail{
  display: flex;
  width: 100%;
  /*margin-top: 10px;*/

}
.pingban-box-box{
  width: 98.5%;
  height: 590px;
  background-color: #f2f2f7;
  border-radius: 9px;
}
.title-pingban2-detail{
  border-top: 1px solid #adacac;
  border-left:1px solid #adacac ;
  border-bottom: 4px solid #2c3e50;
  height: 25px;
  text-align: center;
  width: 100px;
  background-color: white;
}
.title-pingban2{
  display: flex;
  padding-top: 15px;
}
.title-pingban{
  padding-top: 10px;
  padding-left: 5px;
  display: flex;
  /*width: 100%;*/
  /*height: 30px;*/

}
.pingban-box{
  margin-top: 20px;
  margin-left: 20px;
  width: 96%;
  height: 650px;
  padding-left: 17px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
#pb-div{
  background-color: #f2f4fa;
  width: 100%;
  height: 692px;
}
</style>
